<template>
  <div class="app-container">
    <!-- 使用可复用的头部导航组件 -->
    <NavBar 
      :title="appTitle" 
      :nav-links="navLinks"
      :user-info="userInfo"
      :user-menu-items="userMenuItems"
      @nav-update="updateNavLinks"
      @nav-click="handleNavClick"
      @user-menu-click="handleUserMenuClick"
    />
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <h2>欢迎使用 Vue 导航栏示例</h2>
      <p>当前选中: {{ currentPage }}</p>
      <p>点击导航链接或用户菜单体验交互效果</p>
    </main>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'

export default {
  name: 'App',
  components: {
    NavBar
  },
  data() {
    return {
      // 应用标题
      appTitle: 'Vue 应用平台',
      // 导航链接数据
      navLinks: [
        { text: '首页', path: '/', active: true },
        { text: '产品管理', path: '/products', active: false },
        { text: '数据分析', path: '/analytics', active: false },
        { text: '系统设置', path: '/settings', active: false },
        { text: '帮助中心', path: '/help', active: false }
      ],
      // 用户信息
      userInfo: {
        name: '张三',
        avatar: '张'
      },
      // 用户菜单项
      userMenuItems: [
        { text: '个人中心', action: 'profile' },
        { text: '账户设置', action: 'settings' },
        { text: '退出登录', action: 'logout' }
      ],
      // 当前页面
      currentPage: '首页'
    }
  },
  methods: {
    // 更新导航链接状态
    updateNavLinks(updatedLinks) {
      this.navLinks = updatedLinks
      // 更新当前页面信息
      const activeLink = updatedLinks.find(link => link.active)
      if (activeLink) {
        this.currentPage = activeLink.text
      }
    },
    // 处理导航链接点击
    handleNavClick(link) {
      console.log('导航到:', link)
      // 实际项目中这里可以使用路由进行页面跳转
      // this.$router.push(link.path)
    },
    // 处理用户菜单项点击
    handleUserMenuClick(item) {
      console.log('用户菜单操作:', item)
      // 根据不同的操作执行相应的逻辑
      switch (item.action) {
        case 'profile':
          alert('打开个人中心')
          break
        case 'settings':
          alert('打开账户设置')
          break
        case 'logout':
          if (confirm('确定要退出登录吗？')) {
            alert('退出登录成功')
          }
          break
        default:
          break
      }
    }
  }
}
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  background-color: #f5f7fa;
}

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 40px;
  text-align: center;
  background-color: #ffffff;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.main-content h2 {
  color: #303133;
  margin-bottom: 20px;
  font-size: 24px;
}

.main-content p {
  color: #606266;
  margin-bottom: 10px;
  font-size: 16px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .main-content {
    padding: 20px;
    margin: 10px;
  }
  
  .main-content h2 {
    font-size: 20px;
  }
  
  .main-content p {
    font-size: 14px;
  }
}
</style>